<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title> 放大镜 </title>
</head>
<style>
#demo {
    position: relative;
    width: 400px;
    height: 255px;
    margin: 50px;
    border: 1px solid #ccc;
}

#small-box {
    position: relative;
    z-index: 1;
}

#float-box {
    position: absolute;
    display: none;
    width: 160px;
    height: 120px;
    opacity: 0.5;
    background: #ffffcc;
    border: 1px solid #ccc;
}

#mark {
    position: absolute;
    z-index: 10;
    width: 400px;
    height: 255px;
    opacity: 0;
    background-color: #fff;
}

#big-box {
    position: absolute;
    top: 0;
    left: 460px;
    z-index: 1;
    display: none;
    width: 400px;
    height: 300px;
    overflow: hidden;
    border: 1px solid #ccc;
}

#big-box img {
    position: absolute;
    z-index: 5;
}
</style>
<body>

<div id="demo">
    <div id="small-box">
        <div id="mark"></div>
        <div id="float-box"></div>
        <img src="macbook-small.jpg"/>
    </div>

    <div id="big-box">
        <img src="macbook-big.jpg"/>
    </div>
</div>

<script>
//页面加载完毕后执行
window.onload = function () {

    const objMark = document.getElementById("mark");
    const objDemo = document.getElementById("demo");
    const objBigBox = document.getElementById("big-box");
    const objSmallBox = document.getElementById("small-box");
    const objFloatBox = document.getElementById("float-box");
    const objBigBoxImage = objBigBox.getElementsByTagName("img")[0];

    objMark.onmouseover = function () {
        objBigBox.style.display = "block"
        objFloatBox.style.display = "block"
    }

    objMark.onmouseout = function () {
        objBigBox.style.display = "none"
        objFloatBox.style.display = "none"
    }

    objMark.onmousemove = function (ev) {

        const event = ev || window.event;  //兼容多个浏览器的event参数模式

        let top = event.clientY - objDemo.offsetTop - objSmallBox.offsetTop - objFloatBox.offsetHeight / 2;
        let left = event.clientX - objDemo.offsetLeft - objSmallBox.offsetLeft - objFloatBox.offsetWidth / 2;

        if (left < 0) {
            left = 0;
        } else if (left > (objMark.offsetWidth - objFloatBox.offsetWidth)) {
            left = objMark.offsetWidth - objFloatBox.offsetWidth;
        }

        if (top < 0) {
            top = 0;
        } else if (top > (objMark.offsetHeight - objFloatBox.offsetHeight)) {
            top = objMark.offsetHeight - objFloatBox.offsetHeight;

        }

        objFloatBox.style.top = top + "px";
        objFloatBox.style.left = left + "px";   // oSmall.offsetLeft的值是相对什么而言

        var percentX = left / (objMark.offsetWidth - objFloatBox.offsetWidth);
        var percentY = top / (objMark.offsetHeight - objFloatBox.offsetHeight);

        objBigBoxImage.style.left = -percentX * (objBigBoxImage.offsetWidth - objBigBox.offsetWidth) + "px";
        objBigBoxImage.style.top = -percentY * (objBigBoxImage.offsetHeight - objBigBox.offsetHeight) + "px";
    }
}
</script>
</body>
</html>